<template>
  <div class="search-wrapper">
    <div class="search-wrapper__opt">
      <div class="search-wrapper__opt--btns">
        <slot name="btns" />
      </div>
      <div v-if="showInput" class="search-wrapper__opt--input">
        <slot name="search" />
        <div
          v-if="showSwitchIcon"
          :class="['search-icon', { active: showAll }]"
          @click="switchShowAll"
        >
          <img v-if="showAll" src="../../assets/images/hide-icon.png" />
          <img v-else src="../../assets/images/hide-icon-default.png" />
        </div>
      </div>
    </div>
    <sec-form
      v-show="showAll"
      ref="search-bar-form"
      :label-width="labelWidth"
      label-suffix=":"
      size="medium"
      :class="['search-bar-form', widthClass]"
      v-bind="$attrs"
    >
      <slot name="select"></slot>
      <sec-form-item class="search-bar-buttons">
        <sec-button size="medium" type="primary" @click="search">
          查询
        </sec-button>
        <sec-button size="medium" @click="reset">重置</sec-button>
      </sec-form-item>
    </sec-form>
  </div>
</template>

<script>
export default {
  props: {
    placeholder: {
      type: String,
      default: ''
    },
    widthClass: {
      type: String,
      default: 'search-form-20'
    },
    labelWidth: {
      type: String,
      default: '8px'
    },
    showAll: {
      type: Boolean,
      default: false
    },
    showInput: {
      type: Boolean,
      default: true
    },
    showSwitchIcon: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      keyword: ''
    }
  },
  methods: {
    search() {
      this.$emit('search')
    },
    reset() {
      this.$refs['search-bar-form'].resetFields()
      this.$emit('reset')
    },
    switchShowAll() {
      this.$emit('update:showAll', !this.showAll)
      this.$emit('calHeight')
    }
  }
}
</script>

<style lang="scss" scoped>
.search-wrapper {
  &__opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    &--input {
      display: flex;
      align-items: center;
      .search-input {
        flex: 1;
      }
    }
  }
  .search-icon {
    cursor: pointer;
    margin-left: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 2px;
    border: 1px solid #d9d9d9;
    &.active {
      background: #eaefff;
      border: 1px solid #9ab3ff;
      color: #3366ff;
    }
    img {
      display: block;
      width: 14px;
      height: 14px;
    }
  }
  .search-bar-form {
    background: #f9fbff;
    width: 100%;
    border: 1px solid #ebeef5;
    padding: 8px 8px 0px 0px;
  }
  .search-bar-buttons {
    flex: 1;
    display: flex;
    flex-direction: row-reverse;
    white-space: nowrap;
  }
}
</style>
